<template>
  <div class="index-manage">
    <div class="content">
      <div class="manage-table">
        <div class="search-box">
          <div class="search-left">
            <div class="search-item">
              <el-radio-group size="medium" v-model="searchForm.userType" class="radio-btn" @input="onRoleChange">
                <el-radio-button label="0">工作人员</el-radio-button>
                <el-radio-button label="1">负责人</el-radio-button>
              </el-radio-group>
            </div>
          </div>
          <div class="search-right">
            <div class="search-item">
              <div class="info_box">
                本季度全局应考核人数{{ analysisInfo.totalCount }}人，拟定“好”等次人员{{
                  analysisInfo.oneLimitCount
                }}人，现已{{ analysisInfo.oneCount }}人
              </div>
            </div>
            <div class="search-item" v-if="searchForm.userType === '0'">
              <el-select
                v-model="grainDate"
                filterable
                placeholder="请选择"
                size="small"
                clearable
                @change="searchData">
                <el-option
                  v-for="item in timeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </div>
            <div class="search-item">
              <el-button type="primary" size="small" @click="onRelease('0')" v-if="showRankButton === 1">
                确认结果
              </el-button>
              <el-button type="primary" size="small" @click="resultTip" v-if="showRankTipsButton === 1">
                结果确认提示
              </el-button>
              <el-button type="primary" size="small" @click="onRelease('1')" v-if="showPublicityButton === 1">
                公示发布
              </el-button>
              <el-button type="info" size="small" v-if="showPublicityButton === 0 && !disabled">公示发布</el-button>
            </div>
          </div>
        </div>
        <div class="table-con">
          <div class="left-con" v-if="searchForm.userType === '0'">
            <OrganList :source="oragnList" @node-click="onOrganClick"></OrganList>
          </div>
          <div class="right-con">
            <gzryManageTable
              v-if="searchForm.userType === '0'"
              ref="gzryManageTable"
              :source="tableList"
              :disabled="disabled"
              @cancleEdit="cancleEdit"
              @reasonDialogShow="reasonDialogShow"
              :goodNum="goodNum"
              :needPeopleAssess="needPeopleAssess"
              :needPlusMinusPoints="needPlusMinusPoints">
              <div slot="search" class="search-box">
                <div class="search-left">
                  <div class="search-item">
                    <div class="item_label" style="min-width: 60px">考核等次:</div>
                    <el-select
                      v-model="searchForm.level"
                      filterable
                      placeholder="请选择"
                      size="small"
                      clearable
                      @change="searchData">
                      <el-option
                        v-for="item in orderOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"></el-option>
                    </el-select>
                  </div>
                </div>
                <div class="search-right">
                  <div class="search-item">考核人数：{{ gradeNumObj.totalNum }}人</div>
                  <div class="search-item">
                    <el-input
                      placeholder="请输入内容"
                      v-model.trim="searchForm.name"
                      size="small"
                      clearable
                      @keyup.enter.native="searchData">
                      <el-button slot="append" icon="el-icon-search" @click.stop="searchData"></el-button>
                    </el-input>
                  </div>
                </div>
              </div>
              <div slot="search" class="search-box">
                <div class="search-left">
                  <div class="search-item">
                    <el-button type="primary" size="small" icon="el-icon-plus" @click.stop="exportClick">
                      导出
                    </el-button>
                  </div>
                </div>
                <div class="search-right">
                  <div class="search-item">
                    <div class="info">
                      <div class="info_list">好：{{ gradeNumObj.rank1Num }}人</div>
                      <div class="info_list">较好：{{ gradeNumObj.rank2Num }}人</div>
                      <div class="info_list">一般：{{ gradeNumObj.rank3Num }}人</div>
                      <div class="info_list">较差：{{ gradeNumObj.rank4Num }}人</div>
                      <div class="info_list">不定等次：{{ gradeNumObj.rank6Num }}人</div>
                    </div>
                  </div>
                </div>
              </div>
            </gzryManageTable>
            <fzrManageTable
              v-if="searchForm.userType === '1'"
              ref="fzrManageTable"
              :source="tableList"
              :disabled="disabled"
              @reasonDialogShow="reasonDialogShow"
              :goodNum="goodNum"
              @cancleEdit="cancleEdit"
              :needPeopleAssess="needPeopleAssess"
              :needPlusMinusPoints="needPlusMinusPoints"
              :finalAutoEdit="finalAutoEdit"
              @setEqual="setEqual">
              <div slot="search" class="search-box">
                <div class="search-left">
                  <div class="search-item">
                    <el-select
                      v-model="grainDate"
                      filterable
                      placeholder="请选择"
                      size="small"
                      clearable
                      @change="searchData">
                      <el-option
                        v-for="item in timeList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"></el-option>
                    </el-select>
                  </div>
                  <div class="search-item">
                    <div class="item_label" style="min-width: 60px">考核等次:</div>
                    <el-select
                      v-model="searchForm.level"
                      filterable
                      placeholder="请选择"
                      size="small"
                      clearable
                      @change="searchData">
                      <el-option
                        v-for="item in orderOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"></el-option>
                    </el-select>
                  </div>
                </div>
                <div class="search-right">
                  <div class="search-item">考核人数：{{ gradeNumObj.totalNum }}人</div>
                  <div class="search-item">
                    <el-input
                      placeholder="请输入内容"
                      v-model.trim="searchForm.name"
                      size="small"
                      clearable
                      @keyup.enter.native="searchData">
                      <el-button slot="append" icon="el-icon-search" @click.stop="searchData"></el-button>
                    </el-input>
                  </div>
                </div>
              </div>
              <div slot="search" class="search-box">
                <div class="search-left">
                  <div class="search-item">
                    <el-button type="primary" size="small" icon="el-icon-plus" @click.stop="exportClick">
                      导出
                    </el-button>
                  </div>
                </div>
                <div class="search-right">
                  <div class="search-item">
                    <div class="info">
                      <div class="info_list">好：{{ gradeNumObj.rank1Num }}人</div>
                      <div class="info_list">较好：{{ gradeNumObj.rank2Num }}人</div>
                      <div class="info_list">一般：{{ gradeNumObj.rank3Num }}人</div>
                      <div class="info_list">较差：{{ gradeNumObj.rank4Num }}人</div>
                      <div class="info_list">不定等次：{{ gradeNumObj.rank6Num }}人</div>
                    </div>
                  </div>
                </div>
              </div>
            </fzrManageTable>
          </div>
        </div>
      </div>
    </div>
    <ReasonDialog
      :resultShow="resultShow"
      menuPermission="org"
      :goodNumber="gradeNumObj.rank1Num"
      :shouldGoodNumber="gradeNumObj.shouldRank1Num"
      :activeRow="activeRow"
      :result-list="orderOption"
      @close="resultShow = false"
      @sureReason="sureReason"
      :goodNum="goodNum"
      v-bind="$attrs" />
    <exportListDialog
      ref="exportListDialog"
      :exportShow="exportShow"
      @close="exportShow = false"
      @onExport="onExport" />
    <XnDialog
      custom-class="collect_dialog"
      :visible.sync="resultTipDiaShow"
      @close="resultTipDiaShow = false"
      width="600px"
      title="确认提示">
      <div class="dia_con">
        <h3>{{ rankTipsContentVO.periodName }}结果说明：</h3>
        <p>一般工作人员：参评{{ rankTipsContentVO.workTotal }}人</p>
        <div class="detail">
          <span>好：{{ rankTipsContentVO.workRank1 }}人</span>
          <span>较好：{{ rankTipsContentVO.workRank2 }}人</span>
          <span>一般：{{ rankTipsContentVO.workRank3 }}人</span>
          <span>较差：{{ rankTipsContentVO.workRank4 }}人</span>
          <!-- <span>不评等次：{{ rankTipsContentVO.workRank6 }}人</span> -->
        </div>
        <p>处长：参评{{ rankTipsContentVO.leaderTotal }}人</p>
        <div class="detail">
          <span>好：{{ rankTipsContentVO.leaderRank1 }}人</span>
          <span>较好：{{ rankTipsContentVO.leaderRank2 }}人</span>
          <span>一般：{{ rankTipsContentVO.leaderRank3 }}人</span>
          <span>较差：{{ rankTipsContentVO.leaderRank4 }}人</span>
          <!-- <span>不评等次：{{ rankTipsContentVO.leaderRank6 }}人</span> -->
        </div>
      </div>
      <div class="submit_tips">
        <el-button @click="resultTipDiaShow = false" size="small">取 消</el-button>
        <el-button type="primary" size="small" @click="sendTip">确 定</el-button>
      </div>
    </XnDialog>
    <XnDialog
      custom-class="collect_dialog"
      :visible.sync="submitShow"
      @close="submitShow = false"
      width="420px"
      :title="btnType === '0' ? '提示' : '季度考核等次发布'">
      <div>
        <i class="color_warning_dia el-icon-warning"></i>
        <span v-if="btnType === '0'">确认本季度考核结果？确认后不可再修改</span>
        <span v-if="btnType === '1'">发布后等次结果将显示在公示榜，全局人员均可查看所有等次结果。确认现在发布吗?</span>
      </div>
      <div class="submit_tips">
        <el-button @click="submitShow = false" size="small">取消</el-button>
        <el-button type="primary" size="small" @click="submitAll">确 定</el-button>
      </div>
    </XnDialog>
  </div>
</template>

<script>
import gzryManageTable from './components/gzryManageTable'
import fzrManageTable from './components/fzrManageTable'
import OrganList from './components/OrganList.vue'
import XnDialog from '@com/xnDialog.vue'
import ReasonDialog from '../components/ReasonDialog'
import exportListDialog from '../components/exportListDialog.vue'
import { listRecursiveOrgan } from '@apis/api-staAnalysis.js'
import {
  getQuarterAssessPeriods,
  sumAssessResultCount,
  getOrgQueryAssessResultList,
  exportAssessFinalData,
  orgModifyAssessRank,
  makeSureAllOrgAssessRank,
  showAllOrgAssessRank,
  cancleOrgCancelModify,
  getMakeSureRankStatus,
  controlRankTipsShow,
  getorgQueryLeaderAssessResult,
} from '@apis/grade.js'
export default {
  name: 'indexManage',
  components: { gzryManageTable, OrganList, fzrManageTable, XnDialog, ReasonDialog, exportListDialog },
  props: {},
  data() {
    return {
      oragnList: [],
      searchForm: {
        orgId: '',
        userType: '0',
        level: '',
        name: '',
      },
      analysisInfo: {}, // 统计分析总体数据
      timeList: [],
      grainDate: '',
      orgData: {
        status: '0',
        title: '',
      },
      tableList: [],
      gradeNumObj: {
        rank1Num: 0,
        rank2Num: 0,
        rank3Num: 0,
        rank4Num: 0,
        rank5Num: 0,
        rank6Num: 0,
        totalNum: 0,
        shouldRank1Num: 0,
      },
      orderOption: [],
      isAdminSubmit: 0,
      isOrgMakeSure: 0,
      disabled: false,
      content: [],
      exportShow: false,
      resultShow: false,
      activeRow: {},
      activeRank: '',
      timer: null,
      resultTipDiaShow: false,
      submitShow: false,
      submitShowDanwei: false,
      btnType: '0',
      rankTipsContentVO: {}, // 确认等次弹窗提示内容
      showPublicityButton: 0, // 是否显示公示按钮（局长批量确认过等次之后） 0 不显示 1显示
      showRankButton: 0, // 是否显示确认等次提示（所有单位管理员都确认过等次后显示） 0 不显示 1显示
      showRankTipsButton: 0, // 是否显示确认等次提示按钮（所有单位管理员都确认过等次后显示） 0 不显示 1显示
      menuPermission: 'org',
      shouldGoodList: [],
      needPeopleAssess: false, // 是否展示民主测评
      needPlusMinusPoints: false, // 是否展示加分项
      finalAutoEdit: false, // 考核结果是否自动带入false不带入，true带入
    }
  },
  watch: {
    content: {
      handler(news) {
        this.tableList = news
        const orderOptions = [
          {
            value: '',
            label: '全部',
          },
          {
            value: '1',
            label: '好',
          },
          {
            value: '2',
            label: '较好',
          },
          {
            value: '3',
            label: '一般',
          },
          {
            value: '4',
            label: '较差',
          },
          {
            value: '6',
            label: '不定等次',
          },
        ]
        this.searchForm.level = this.searchForm.level || ''
        this.orderOption = orderOptions
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {
    goodNum() {
      return this.analysisInfo.oneLimitCount - this.analysisInfo.oneCount || 0
    },
  },
  created() {
    this.getQuarterAssessPeriods()
  },
  mounted() {},
  methods: {
    async getOrganList() {
      const { status, data } = await listRecursiveOrgan({
        oneParam: localStorage.pskh_tenantId,
        quarter: this.timeList[this.grainDate].quarter,
        year: this.timeList[this.grainDate].year,
      })
      if (status === 200 && data && data.length) {
        this.oragnList = data[0].queryOutVOS
      } else {
        this.oragnList = []
      }
    },
    onOrganClick(data) {
      this.searchForm.orgId = data.id
      this.initManageData()
    },
    initManageData() {
      if (this.searchForm.userType === '0') {
        this.getOrgQueryAssessResultList()
      } else {
        this.getorgQueryLeaderAssessResult()
      }
    },
    onRoleChange() {
      this.initManageData()
    },
    getQuarterAssessPeriods() {
      getQuarterAssessPeriods().then(res => {
        if (res.status === 200 && res.data.length) {
          const arr = []
          const data = res.data
          for (let i = 0; i < data.length; i++) {
            arr.push({
              value: i,
              label: data[i].periodName,
              quarter: data[i].quarter,
              year: data[i].year,
            })
          }
          this.grainDate = 0
          this.timeList = arr
          this.onStatusChange()
          this.sumAssessResultCount()
          this.changeGrain(this.grainDate)
        }
      })
    },
    onStatusChange() {
      const quarterObj = this.timeList[this.grainDate]
      this.orgData = {
        ...this.orgData,
        ...quarterObj,
      }
    },
    sumAssessResultCount(data) {
      const idx = data || this.grainDate
      const time = this.timeList[idx]
      sumAssessResultCount({
        quarter: time.quarter,
        year: time.year,
      })
        .then(res => {
          if (this.searchForm.userType === '0') {
            this.getOrganList()
          }
          if (res.status === 200) {
            this.analysisInfo = res.data
          }
        })
        .catch(() => {
          if (this.searchForm.userType === '0') {
            this.getOrganList()
          }
        })
    },
    searchData() {
      this.changeGrain(this.grainDate)
      this.initManageData()
      this.sumAssessResultCount()
    },
    onExport(str) {
      const req = `?assessRank=${this.searchForm.level}&keywords=${this.searchForm.name}&orgId=${
        this.searchForm.orgId
      }&quarter=${this.timeList[this.grainDate].quarter}&queryType=${this.searchForm.userType}&year=${
        this.timeList[this.grainDate].year
      }&containFile=${str}&tenantId=${localStorage.pskh_tenantId}`
      const link = document.createElement('a')
      link.href = exportAssessFinalData(req)
      console.log('link.href :>> ', link.href)
      link.target = 'targetName'
      link.click()
      this.exportShow = false
    },
    getOrgQueryAssessResultList() {
      getOrgQueryAssessResultList({
        assessRank: this.searchForm.level,
        assessType: 'QUARTER',
        keywords: this.searchForm.name,
        month: '',
        orgId: this.searchForm.orgId,
        quarter: this.timeList[this.grainDate].quarter,
        year: this.timeList[this.grainDate].year,
        queryType: this.searchForm.userType,
      }).then(res => {
        this.load = false
        this.needPeopleAssess = res.data.needPeopleAssess
        this.needPlusMinusPoints = res.data.needPlusMinusPoints
        this.content = res.data.userAssessFinalResultResponseVOList
        if (res.data.dataNumResponseVO) {
          this.gradeNumObj = res.data.dataNumResponseVO
        } else {
          this.gradeNumObj = {
            rank1Num: 0,
            rank2Num: 0,
            rank3Num: 0,
            rank4Num: 0,
            rank5Num: 0,
            rank6Num: 0,
            totalNum: 0,
            shouldRank1Num: 0,
          }
        }
        this.isOrgMakeSure = res.data.isOrgMakeSure
        if (this.isOrgMakeSure === 1) {
          this.disabled = true
        } else {
          this.disabled = false
        }
      })
    },
    // 导出
    exportClick() {
      if (this.tableList.length === 0) return
      this.exportShow = true
    },
    sureReason(remark, id, albumList) {
      this.activeRow.orgAssessRank = id
      this.activeRow.modifyReason = remark
      this.activeRow.adminFileShowVOList = albumList
      this.submitAssessRank('reason')
    },
    submitAssessRank(type) {
      let assessRank = this.activeRow.assessRank
      if (this.menuPermission === 'org') {
        assessRank = this.activeRow.orgAssessRank
      } else if (type === 'reason') {
        assessRank = this.activeRank
      }
      const param = {
        assessRank: assessRank,
        modifyReason: this.activeRow.modifyReason,
        noteId: this.activeRow.noteId,
        fileShowVOList: this.activeRow.adminFileShowVOList,
        personNum: this.tableList.length,
        userId: this.activeRow.userId,
        userName: this.activeRow.userName,
        quarter: this.timeList[this.grainDate].quarter,
        year: this.timeList[this.grainDate].year,
      }
      orgModifyAssessRank([param]).then(res => {
        if (res.status === 200) {
          if (!res.message) {
            this.activeRow.assessRank = this.activeRank
            this.resultShow = false
            this.getData()
            this.sumAssessResultCount()
          } else {
            this.$confirm(res.message, '提示', {
              confirmButtonText: '确定',
              type: 'warning',
              showCancelButton: false,
            })
              .then(() => {})
              .catch(() => {})
          }
        }
      })
    },
    submitResult() {
      let finishFlag = true
      let message = ''
      if (this.gradeNumObj.rank1Num > this.gradeNumObj.shouldRank1Num) {
        finishFlag = false
        message = `根据评分规则，设置等次为好的人数最多为${this.gradeNumObj.shouldRank1Num}人`
      }
      if (!finishFlag) {
        this.$message.warning(message)
      } else {
        this.submitShow = true
      }
    },
    submitAll() {
      const quarterObj = this.timeList[this.grainDate]
      if (this.btnType === '0') {
        makeSureAllOrgAssessRank({
          quarter: quarterObj.quarter,
          year: quarterObj.year,
        }).then(res => {
          if (res.status === 200) {
            if (res.message) {
              return this.$message.warning(res.message)
            } else {
              this.$message.success('确认成功')
              this.initManageData()
              this.changeGrain(this.grainDate)
            }
          }
        })
      } else if (this.btnType === '1') {
        showAllOrgAssessRank({
          quarter: quarterObj.quarter,
          year: quarterObj.year,
        }).then(res => {
          if (res.status === 200) {
            this.$message.success('发布成功')
            this.initManageData()
            this.changeGrain(this.grainDate)
          }
        })
      }

      this.submitShow = false
    },
    cancleEdit(row) {
      cancleOrgCancelModify({ oneParam: row.noteId }).then(res => {
        if (res.status === 200) {
          this.$message.success('取消等次调整成功')
          this.getData()
          this.sumAssessResultCount()
        }
      })
    },
    getData() {
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.initManageData()
      }, 500)
    },
    reasonDialogShow(row) {
      this.activeRow = JSON.parse(JSON.stringify(row))
      this.activeRank = row.assessRank
      this.resultShow = true
    },
    async resultTip() {
      const { data } = await getMakeSureRankStatus({
        quarter: this.timeList[this.grainDate].quarter,
        year: this.timeList[this.grainDate].year,
      })
      this.rankTipsContentVO = data.rankTipsContentVO || {}
      this.resultTipDiaShow = true
    },
    onRelease(type) {
      this.btnType = type
      this.submitShow = true
    },
    sendTip() {
      controlRankTipsShow({
        quarter: this.rankTipsContentVO.quarter,
        year: this.rankTipsContentVO.year,
      }).then(res => {
        if (res.status === 200) {
          this.$message.success('发送成功')
          this.changeGrain(this.grainDate)
        }
      })
      this.resultTipDiaShow = false
    },
    changeGrain(data) {
      this.grainDate = data
      const time = this.timeList[this.grainDate]
      getMakeSureRankStatus({
        quarter: time.quarter,
        year: time.year,
      }).then(res => {
        if (res.status === 200 && res.data) {
          this.rankTipsContentVO = res.data.rankTipsContentVO || {}
          this.showPublicityButton = res.data.showPublicityButton
          this.showRankButton = res.data.showRankButton
          this.showRankTipsButton = res.data.showRankTipsButton
        }
      })
    },
    getorgQueryLeaderAssessResult() {
      this.shouldGoodList = []
      getorgQueryLeaderAssessResult({
        assessRank: this.searchForm.level,
        assessType: 'QUARTER',
        keywords: this.searchForm.name,
        month: '',
        orgId: '',
        quarter: this.timeList[this.grainDate].quarter,
        year: this.timeList[this.grainDate].year,
        queryType: this.searchForm.userType,
        stage: 'ORG_MAKE_SURE',
        pageNum: 1,
        pageSize: 1000,
      }).then(res => {
        this.load = false
        this.finalAutoEdit = res.data.finalAutoEdit !== 0
        this.needPeopleAssess = res.data.needPeopleAssess
        this.needPlusMinusPoints = res.data.needPlusMinusPoints
        this.content = res.data.userAssessFinalResultResponseVOList
        if (res.data.dataNumResponseVO) {
          this.gradeNumObj = res.data.dataNumResponseVO
        } else {
          this.gradeNumObj = {
            rank1Num: 0,
            rank2Num: 0,
            rank3Num: 0,
            rank4Num: 0,
            rank5Num: 0,
            rank6Num: 0,
            totalNum: 0,
            shouldRank1Num: 0,
          }
        }
        const arr = res.data.userAssessFinalResultResponseVOList.slice(0, res.data.dataNumResponseVO.shouldRank1Num)
        arr.forEach(item => {
          this.shouldGoodList.push(item.userId)
        })
        const isOrgMakeSure = res.data.isOrgMakeSure
        if (isOrgMakeSure === 1 || !res.data.userAssessFinalResultResponseVOList.length) {
          this.disabled = true
        } else {
          this.disabled = false
        }
      })
    },
    setEqual(item, row) {
      if (this.disabled) return
      if (item.id === '1' && this.goodNum <= 0) {
        this.$message.warning('根据评分规则，设置等次为好的人数已满')
        return
      }

      row.orgAssessRank = item.id
      this.activeRank = item.id
      this.activeRow = JSON.parse(JSON.stringify(row))
      this.submitAssessRank('reason')
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@styles/layout.scss';
.index-manage {
  height: 100%;
  .content {
    // height: calc(100% - 78px);
    height: calc(100%);
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    position: relative;
    .search-box {
      width: 100%;
      margin-bottom: 10px;
    }
    .manage-table {
      flex: 1;
      display: flex;
      flex-direction: column;
      .search-box {
        border-bottom: 1px solid #e4eaf0;
        padding-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .search-right {
          display: flex;
          align-items: center;
          .search-item + .search-item {
            margin-left: 20px;
          }
          .info_box {
            color: #d9001b;
          }
        }
      }
      .table-con {
        flex: 1;
        display: flex;
        align-items: stretch;
        overflow: hidden;
        .left-con {
          width: 250px;
          min-width: 250px;
          height: 100%;
          margin-right: 20px;
          overflow: auto;
          position: relative;
          border-right: 1px solid #e4eaf0;
        }
        .right-con {
          flex: 1;
          margin: 0 auto;
          position: relative;
          display: flex;
          flex-direction: column;
          width: calc(100% - 275px);

          .search-item {
            display: flex;
            align-items: center;
            .item_label {
              margin-right: 10px;
            }
          }
        }
      }
    }
  }
}
/deep/.dia_con {
  h3,
  p {
    color: #333333 !important;
  }
  p {
    margin-top: 10px;
    margin-bottom: 5px;
  }
  .detail {
    padding-left: 20px;
    span {
      color: #1559b8;
      display: inline-block;
      width: 120px;
      margin-left: 5px;
    }
  }
}
/deep/.submit_tips {
  text-align: center !important;
  margin: 25px 0 10px;
}
.color_warning_dia {
  color: #e6a23c;
  font-size: 18px;
}
</style>
